<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
        <meta http-equiv="content" content="text/html; charset=UTF-8" />
        <title>SnapShotControl 2.0: Poly Styles</title>
        <!--
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry">
        </script>
        <script type="text/javascript">
            document.write('<script type="text/javascript" src="../src/snapshotcontrol' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
        </script>
        <script type="text/javascript">
            var map;
            var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);
            
            var MY_MAPTYPE_ID = 'hiphop';
            
            function initialize() {
            
              // add control
              var snapShotControl = new SnapShotControl();
              
              var stylez = [{
                featureType: "road",
                elementType: "geometry",
                stylers: [{
                  hue: "#00ff00"
                }, {
                  saturation: 100
                }]
              }, {
                featureType: "landscape",
                elementType: "geometry",
                stylers: [{
                  hue: "#000000"
                }, {
                  saturation: 75
                }, {
                  lightness: -100
                }]
              }];
              
              var mapOptions = {
                zoom: 12,
                center: brooklyn,
                mapTypeControlOptions: {
                  mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
                },
                mapTypeId: MY_MAPTYPE_ID
              };
              
              map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
              
              var styledMapOptions = {
                name: "Hip-Hop"
              };
              
              var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
              
              map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
              map.setMapTypeId(MY_MAPTYPE_ID);
              
              snapShotControl.setMap(map);
            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width: 640px; height: 480px;">
        </div>
    </body>
</html>
